<template>
	<view class="containar">
		<view class="avatarUrl">
			<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
				<image :src="avatarUrl" class="refreshIcon"></image>
			</button>
		</view>
		<view class="userName">
			<text>昵称：</text>
			<input type="nickName" class="weui-input" :value="userName" @blur="bindblur" placeholder="请输入昵称"
				@input="bindinput" />
		</view>

		<view class="btn">
			<view class="btn-sub" @click="onSubmit">保存</view>
		</view>
	</view>
</template>
<script>
	import {
		userEdit
	} from '@/api/user.js'
	export default {
		data() {
			return {
				avatarUrl: '',
				userName: '',
				isImgtype: 1,
			};
		},
		onLoad(e) {
			console.log('222444', e);
			// if (e.isImgtype && e.isImgtype === '2') {
			// 	this.isImgtype = 2
			// 	console.log('这是从登录进来的', this.isImgtype);
			// } else {
			// 	this.isImgtype = 1
			// }
			this.userName = e.nickName || ''
			this.avatarUrl = e.headImgUrl || ''

		},
		onShow() {
			// this.avatarUrl = uni.getStorageSync('avatarUrl') || ''
			// this.userName = uni.getStorageSync('avatarName') || ''

		},
		methods: {
			// 微信昵称输入框失焦时触发
			bindblur(e) {
				this.userName = e.detail.value; // 获取微信昵称
				// console.log('微信昵称输入框失焦时触发', e);
			},
			// 微信昵称输入框改变时触发
			bindinput(e) {
				this.userName = e.detail.value; // 获取微信昵称
				// console.log('微信昵称输入框改变时触发', e);
			},

			// 选择图片后触发
			onChooseavatar(e) {
				let self = this;
				let {
					avatarUrl
				} = e.detail;
				this.avatarUrl = avatarUrl
				console.log('999', e.detail.avatarUrl);
			},
			// 保存按钮
			async onSubmit() {
				if (!this.userName) {
					this.toast('请填入昵称再保存')
					return false
				}
				const res = await userEdit({
					nickName: this.userName || '',
					headImgUrl: this.avatarUrl || '',
				})
				if (res.code == 200) {
					this.toast(res.msg + '，即将返回');
					setTimeout(() => {
						this.routerLink({
							path: '/pages/main/mine',
							query: {
								isImgtype: 2
							}
						})
					}, 2000)
				} else {
					this.toast(res.msg);
				}


				// uni.setStorageSync('avatarUrl', this.avatarUrl)
				// uni.setStorageSync('avatarName', this.userName)
				// if (this.isImgtype === 2) {
				// 	this.toast('设置成功,即将返回登录页')
				// 	setTimeout(() => {
				// 		this.routerLink({
				// 			path: '/pages/main/mine',
				// 			query: {
				// 				isImgtype: 2
				// 			}
				// 		})
				// 	}, 2000)
				// 	// this.thirdLogin()
				// } else {
				// 	this.toast('修改成功')
				// 	setTimeout(() => {
				// 		uni.navigateBack({
				// 			delta: 1
				// 		});
				// 	}, 2000)
				// }
			}
		}
	}
</script>
<style lang="scss" scoped>
	.containar {
		.avatarUrl {
			padding: 80rpx 0 40rpx;
			background: #fff;

			button {
				background: #fff;
				line-height: 80rpx;
				height: auto;
				border: none !important;
				width: auto;
				// padding: 20rpx 30rpx;
				margin: 0;
				display: flex;
				border: none;
				justify-content: center;
				align-items: center;

				&::after {
					border: none;
				}

				.refreshIcon {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					background-color: #ccc;
				}

				.jt {
					width: 14rpx;
					height: 28rpx;
				}
			}
		}

		.userName {
			background: #fff;
			padding: 20rpx 30rpx 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.weui-input {
				padding-left: 60rpx;
			}
		}

		.btn {
			width: 100%;

			.btn-sub {
				width: 670rpx;
				margin: 80rpx auto 0;
				height: 90rpx;
				background: #DF8585;
				border-radius: 45rpx;
				line-height: 90rpx;
				text-align: center;
				font-size: 36rpx;
				color: #fff;
			}
		}
	}
</style>